<template>
<div class="tree-item">
  <div class="tree-bg relative-position" :class="{active}" v-if="item.label!=='default'"
       @click="setActiveId(item.idHash)" v-ripple.center v-throttle>
    <div class="tree-line text-subtitle1" :style="{paddingLeft:(isOrganize? item.level - 2 : item.level)*20+'px'}">
<!--    <div class="tree-line text-subtitle1" :style="{paddingLeft:item.level*20+'px'}">-->

      <q-btn dense round flat
             :icon="item.open ? 'iconfont icontubiao-40' : 'iconfont icontubiao-43'"
             :class="{invisible, fold: !item.open}"
             class="q-mx-sm"
             style="font-size: 10px;margin: 0"
             :color="active?'primary':'black'"
             @click.stop="setOpen()"/>
<!--      <q-icon :class="{invisible, fold: !item.open}" @click.stop="setOpen()" class="q-mx-sm icon cursor-pointer"
               name="iconfont icontubiao-40" :color="active?'primary':'black'" />-->
      <span class="name cursor-default user-select-none ellipsis" :style="{width: ellipsis ? nameWidth+'px' : 'auto'}">
        {{item.label}}
      </span>
    </div>
  </div>
  <q-slide-transition>
    <div v-show="item.open">
      <tree-item v-for="child in item.children" :key="child.id" :item="child" :activeId="activeId" :ellipsis="ellipsis" :isDisable="isDisable" :isOrganize="isOrganize"></tree-item>
    </div>
  </q-slide-transition>
</div>
</template>

<script>
import TreeItem from './item'
export default {
  name: 'tree-item',
  data () {
    return {
      nameWidth: 'auto'
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          label: '',
          id: '',
          children: [],
          childrenCount: 0,
          idHash: ''
        }
      }
    },
    isOrganize: {
      type: Boolean,
      default: false
    },
    activeId: {
      type: Number,
      default: 0
    },
    ellipsis: {
      type: Boolean,
      default: true
    },
    isDisable: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    invisible () {
      return !(this.item.children && this.item.childrenCount > 0)
    },
    active () {
      return this.item.idHash === this.activeId
    }
  },
  mounted () {
    this.$nextTick((item) => {
      this.setNameWidth()
    })
    window.onresize = () => {
      this.setNameWidth()
    }
  },
  methods: {
    setNameWidth () {
      this.$nextTick(() => {
        const element = document.getElementsByClassName('tree-line')
        if (element.length) {
          let width = element[0].clientWidth
          this.nameWidth = width - 32 - (this.item.level * 20) - 4
        }
      })
    },
    setActiveId (id) {
      if (this.isDisable) return
      this.CommonConfig.event.$emit('change-activeid', id, this.item)
    },
    setOpen () {
      this.item.open = !this.item.open
    }
  },
  components: {
    TreeItem
  }
}
</script>

<style scoped lang="stylus">
.tree-item{
  line-height 0
}
.tree-bg{
  padding 0 20px
  width auto
  min-width 100%
  display inline-block
  transition: background-color 0.3s;
  &.active{
    background-color #CFD6FE !important
    color #5F77FD
  }
  &:hover{
    background-color #e8ebff
  }
  .tree-line{
    width auto
    height 49px
    line-height 48px
    border-bottom 1px solid #D3D3D3
    white-space nowrap
    .name{
      display inline-block
      vertical-align middle
      font-size 14px
    }
  }
  .icon{
    transition transform 300ms ease-in
    &.fold{
      transform rotate(-90deg)
    }
  }
}
.cursor-default{
  cursor default
}
</style>
